<template>
  <view class="progress">
    <view class="left-part">{{ leftText }}</view>
    <view class="middle-part" :style="{ background: barColor }">
      <view
        class="point-text"
        :style="{ color: numColor, left: `calc(${doneWidth} - 52rpx)` }"
      >
        <!-- <text class="point-num">{{ itemData.rate }}</text> -->
        <text>{{ itemData.desc }}</text>
      </view>
      <view
        class="round-point"
        :style="{ background: roundColor, left: doneWidth }"
      ></view>
    </view>
    <view class="right-part">{{ rightText }}</view>
  </view>
</template>

<script>
export default {
  props: {
    numColor: {
      type: String,
      default: '#559a27'
    },
    roundColor: {
      type: String,
      default: '#6EC236'
    },
    barColor: {
      type: String,
      default: '#D3F0DA'
    },
    leftText: {
      type: String,
      default: '#D3F0DA'
    },
    rightText: {
      type: String,
      default: '#D3F0DA'
    },
    itemData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {};
  },
  computed: {
    ratio() {
      const r = +this.itemData.rate / 100;
      return r;
    },
    doneWidth() {
      return (+this.itemData.rate / 100) * 100 + '%';
    }
  },
  created() {},
  mounted() {
    console.log('doneStyle:', this.doneWidth);
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'D-DIN-PRO-800-ExtraBold';
  /*定义字体名称*/
  src: url('https://img3.job1001.com/ypMp/elan/fontFamily/careerPath/D-DIN-PRO-800-ExtraBold.ttf');
}
.progress {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 50rpx 0 30rpx 0;
  .left-part,
  .right-part {
    font-family: Source Han Sans CN;
    font-size: 28rpx;
    color: #859389;
  }
  .middle-part {
    position: relative;
    flex: 1;
    height: 24rpx;
    border-radius: 10rpx;
    border: 4rpx solid #ffffff;
    margin: 0 20rpx;
    .point-text {
      position: relative;
      top: -68rpx;
      font-family: 'D-DIN-PRO-800-ExtraBold';
      font-size: 36rpx;
      font-weight: 600;
      color: #559a27;
      .point-num {
        padding-right: 12rpx;
        font-family: 'D-DIN-PRO-800-ExtraBold';
      }
    }
    .round-point {
      position: absolute;
      top: -11rpx;
      width: 40rpx;
      height: 40rpx;
      background: #6ec236;
      box-shadow: 0rpx 5rpx 24rpx 3rpx #a0b5cb;
      border-radius: 50%;
      border: 4rpx solid #ffffff;
    }
  }
}
</style>
